<template>
  <div>
    <div class="player" v-if="urlLists.length&&isShow">
        <div class="detialWrapper" v-if="songsDetiailObj.name" @click="showSongsDetails">
            <img :src="songsDetiailObj.al.picUrl"  height="100%">
            <span class="songsName">
                {{songsDetiailObj.name}}
            </span>
            <br>
            <br>
            <span class="arName" v-for="(item, index) in songsDetiailObj.ar" :key="index">
                {{item.name}}
            </span>
        </div>
      <div class="oncControl"  @click="onPaused">
        <svg class="icon" aria-hidden="true" v-if="pause">
          <use xlink:href='#icon-bofang2'  />
        </svg>
        <svg class="icon" aria-hidden="true" v-if="!pause">
          <use xlink:href='#icon-bofang4'  />
        </svg>
      </div>
    </div>
      <audio
        autoplay
        :src="urlLists[urlLists.length-1].url"
        @loadstart="onloadStart"
        ref="audio"
        v-if="urlLists.length"
        @ended="onPaused"
        @timeupdate="updataTime"
      ></audio>
  </div>
</template>

<script>
import {getSongsDetails} from "../../api/recommend"
import { setTimeout } from 'timers';
export default {
  data() {
    return {
        isShow:true,
      pause: true,
      songsDetiailObj:{}
    };
  },
  created(){
     if(this.$route.path=="/songsDetails"){
          this.isShow=false
     }else{
       this.isShow=true
   }
  }
  ,
  watch:{
  $route(to){
   if(to.path=="/songsDetails"){
       this.isShow=false
   }else{
       this.isShow=true
   }
  }
},
mounted(){
      let audio = document.querySelector('audio');
      if(!audio) return
    if(audio.paused){
        this.pause=true
    }else{
        this.pause=false
    }
},
  computed:{
      urlLists(){
          setTimeout(function(){
      let audio = document.querySelector('audio');
             if(audio&&audio.paused){
                this.pause=false
            }else{
                this.pause=true
            }
          },0)
          return this.$store.getters.getUrlLists
      }
  },
  methods: {
      updataTime(){
           let audio = this.$refs.audio;
      },
      onloadStart(){
          getSongsDetails(this.urlLists[this.urlLists.length-1].id).then(res=>{
              this.songsDetiailObj=res.data.songs[0]
          })
      },
      showSongsDetails(){
          this.$router.push({path:"songsDetails",query:{obj:this.songsDetiailObj}})
      },
    onPaused() {
      let audio = this.$refs.audio;
      if (audio.paused) {
        audio.play();
        this.pause=false
      } else {
        audio.pause();
         this.pause=true
      }
    }
  }
};
</script>

<style scoped lang="stylus">
.icon {
  width: 30px;
  height: 30px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.player
    position fixed
    bottom 20px
    right 10px
    height 100px
    width 100px
    border-radius 50%
    .detialWrapper
        height 100%
        width 100%
        position absolute
        top 0px
        left 0px
        span 
            position relative
            font-size 12px
            font-weight 700
            color white
            top 30%
            transform translateY(-50%)
            &.songsName
                margin-bottom 5px
                font-size 14px
                color rgb(90,46,1)
        img 
            height 100%
            width 100%
            position absolute
            top 0px 
            left 0px
            border-radius 50%
            opacity 0.6
            background  hsla(120,100%,100%,1)
            animation rotated 2s infinite normal
    .oncControl
        width 40px
        height 40px
        position absolute
        top -17px 
        right -10px
@keyframes rotated {
    0%{
        transform:rotate(360deg)
    }

    100%{
        transform:rotate(0deg)
    }
}
</style>